import React, { Dispatch, SetStateAction, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Grid, { GridChar } from './Grid';
import Board from './Board';
import NineGrid from './NineGrid';

function App() {
  var boardData:GridChar[] = Array(9).fill(GridChar.empty)
  const [history, setHistory] = useState(boardData)
  const [currChar, setCurrChar] = useState(GridChar.charA)

  //var a:Dispatch<SetStateAction<GridChar[]>>
  function onBoardClick(idx:number) {
      if(history[idx]!=GridChar.empty)
        return
      
      var newHistoryChars = history.slice()   
      newHistoryChars[idx] = currChar
      setHistory(newHistoryChars)
      setCurrChar(currChar==GridChar.charA?GridChar.charB:GridChar.charA)
  }

  function onResetClick() {
    var newHistoryChars = history.slice() 
    newHistoryChars.fill(GridChar.empty)  
    setHistory(newHistoryChars)
    setCurrChar(GridChar.charA)
  }

  return (
    <div className="App">
      <header className="App-header">
        <Board chars={history} onClick={onBoardClick} />
        <br />
        <Grid char={currChar} />
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={onResetClick}>重置</button>
        <NineGrid />
        
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
